<template>
  <div>
    <el-row type="flex" class="bgfff" justify="space-between">
      <el-col :span="13">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
          <el-form-item style="margin-bottom: 0;">
            <el-button type="primary" @click="handleAdd" v-hasPermi="['mahjong:member:add']"><i class="el-icon-plus el-icon--left"></i>新增会员</el-button>
          </el-form-item>

          <el-form-item label="" prop="phone" style="margin-bottom: 0;">
            <el-input v-model="queryParams.phone" placeholder="请输入手机号或者会员姓名查询" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>

          <el-form-item style="margin-bottom: 0;">
            <el-button type="success" @click="handleQuery">查询</el-button>

          </el-form-item>
        </el-form>
      </el-col>

      <el-col class="btn">
        <el-button type="primary"
                   icon="el-icon-edit"
                   size="mini"  @click="gother(1)"  v-hasPermi="['mahjong:member:out']">支出</el-button>
        <el-button type="primary"
                   icon="el-icon-edit"
                   size="mini"   @click="gother(0)" v-hasPermi="['mahjong:member:out']">其他收入</el-button>
        <el-button type="primary"
              icon="el-icon-edit"
              size="mini"  :disabled="single" @click="gojf" v-hasPermi="['mahjong:member:cover']">积分兑换</el-button>
        <el-button type="primary"
                   icon="el-icon-edit"
                   size="mini"  :disabled="single" @click="sendye=true" v-hasPermi="['mahjong:member:send']">赠送金额</el-button>
              <el-button type="info"
              icon="el-icon-edit"
              size="mini"  :disabled="single"  @click="refundVisible = true" v-hasPermi="['mahjong:member:back']">退款</el-button>
              <el-button type="success"
              icon="el-icon-plus"
              size="mini"   :disabled="single" @click="goRecharge" v-hasPermi="['mahjong:member:query']">充值</el-button>

      </el-col>
    </el-row>
    <div class="app-container">
      <el-row type="flex" justify="space-between">
        <el-col :span="5" class="item">
          <p>会员总数</p>
          <div>
            <img src="@/assets/image/menber.png" alt=""><span>{{count.number}}</span>人
          </div>
        </el-col>
        <el-col :span="5" class="item">
          <p>今日新增</p>
          <div>
            <img src="@/assets/image/add.png" alt=""><span>{{count.today}}</span>人
          </div>
        </el-col>
        <el-col :span="5" class="item">
          <p>赠送余额</p>
          <div>
            <img src="@/assets/image/kayue.png" alt=""><span>{{count.saleMoney}}</span>元
          </div>
        </el-col>
        <el-col :span="5" class="item">
          <p>储值金额</p>
          <div>
            <img src="@/assets/image/kayue.png" alt=""><span>{{count.storedMoney}}</span>元
          </div>
        </el-col>
        <el-col :span="9" class="item1">
          <!--<p class="title">会员分析</p>
          <el-row>
            <el-col :span="12" class="zhekou" >
              <div @click="sort(0)">
                <p class="left"><img src="@/assets/image/paihang.png" alt="">充值排行</p>
              <p class="arrow"><i class="el-icon-arrow-right"></i></p>
              </div>

            </el-col>
            <el-col :span="12" class="zhekou" >
              <div @click="sort(1)">
                <p class="left"><img src="@/assets/image/xiaofei.png" alt="">消费排行</p>
              <p class="arrow"><i class="el-icon-arrow-right"></i></p>
              </div>

            </el-col>
          </el-row>-->


        </el-col>
      </el-row>
      <div class="tableWrap">
        <el-table v-loading="loading" :data="memberList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
<!--          <el-table-column label="会员编号" align="center" prop="memberId" />-->
          <el-table-column label="卡号" align="center" prop="cardNumber" />
          <el-table-column label="姓名" align="center" prop="name" />
          <el-table-column label="电话" align="center" prop="phone" />

          <el-table-column label="打牌大小" align="center" prop="ordinaryMahjong" :formatter="majiangCoustromFormat" />
          <el-table-column label="卡内余额" align="center" prop="money" />
          <el-table-column label="储值余额" align="center" prop="storedMoney" />
          <el-table-column label="赠送余额" align="center" prop="sendMoney" />
          <el-table-column label="积分" align="center" prop="integral" />
          <el-table-column label="喜欢" align="center" prop="likes" :formatter="likesFormat"/>
          <el-table-column label="忌讳" align="center" prop="taboo":formatter="tabooFormat" />
          <el-table-column label="自定义标签" align="center" prop="custom":formatter="customFormat" />
          <el-table-column label="不同桌" align="center" prop="different" />
          <el-table-column label="打牌时间" align="center" prop="playingTime" :formatter="playingTimeFormat"/>
          <el-table-column label="车程" align="center" prop="drivingDistance" />
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="生日" align="center" prop="birthday" width="180">
          <!--  <template slot-scope="scope">
              <span>{{ parseTime(scope.row.birthday) }}</span>
            </template>-->
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdateOther(scope.row)"
                v-hasPermi="['mahjong:member:edit']"
              >特点维护
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['mahjong:member:remove']"
              >修改资料
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['mahjong:member:remove']"
              >删除会员
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="txtcenter">
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>


    </div>
    <!-- 添加或修改会员管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px">
      <add :close.sync="open" :form="form" @getData="getList"></add>
    </el-dialog>
    <!-- 积分兑换 -->
    <el-dialog title="积分兑换" :visible.sync="pointsRedemption" width="400px">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="" prop="memberId">
          <el-input v-model="form.memberId" placeholder="请输入要兑换的会员的手机号或姓名" />
        </el-form-item>
        <el-form-item class="txtright">
          <el-button @click="pointsRedemption = false">取消</el-button>
          <el-button type="primary" @click="visibleDialog = true">确认</el-button>

        </el-form-item>
      </el-form>
    </el-dialog>
    <!--赠送余额-->
    <el-dialog title="赠送余额" :visible.sync="sendye" width="400px">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="赠送金额" prop="memberId">
          <el-input v-model="sendmoney" type="number" placeholder="请输入赠送的金额" />
        </el-form-item>
        <el-form-item label="备注" prop="memberId">
          <el-input v-model="sendremark"  placeholder="请输入赠送的金额" />
        </el-form-item>
        <el-form-item class="txtright">
          <el-button @click="sendye = false">取消</el-button>
          <el-button type="primary" @click="sumbitSendMoney">确认</el-button>

        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 积分兑换(个人) -->
    <el-dialog title="个人积分" :visible.sync="visibleDialog" width="1040px" :append-to-body=true>
      <dialogContent :close.sync="visibleDialog" :details="details"  @goLoadMember="initData" ></dialogContent>
    </el-dialog>
    <!-- 退款 -->
    <el-dialog title="退款" :visible.sync="refundVisible" width="400px">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="" prop="checkPassword">
          <el-input v-model="checkPassword" type="password" placeholder="请输入退款密码" />
        </el-form-item>
        <el-form-item class="txtright">
          <el-button @click="refundVisible = false">取消</el-button>
          <el-button type="primary" @click="checkPass">确认</el-button>

        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 退款（个人） -->
    <el-dialog title="退款" :visible.sync="refundDialog" width="500px" :append-to-body=true>
      <dialogRefund :close.sync="refundDialog" :details="details"  @goLoadMember="initData"></dialogRefund>

    </el-dialog>
    <!-- 充值 -->
    <el-dialog title="充值" :visible.sync="recharge" width="500px">
      <rechargeDialog :close.sync="recharge" :details="details"  @gocz="getList"></rechargeDialog>
    </el-dialog>
    <el-dialog title="排行列表" :visible.sync="isRecord" width="1000px">
      <record  :idx="index"></record>
    </el-dialog>
    <!-- 添加或修改其他消费对话框 -->
    <el-dialog :title="title" :visible.sync="otheropen" width="500px">
      <el-form ref="form" :model="otherfrom" :rules="rules" label-width="80px">

          <el-form-item label="名称" prop="name">
            <el-input v-model="otherfrom.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="otherfrom.price" type="number" placeholder="请输入价格" />
          </el-form-item>
        <el-form-item label="数量" prop="number">
          <el-input v-model="otherfrom.number" type="number"  placeholder="请输入数量" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="otherfrom.remark"  type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitotherfrom">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改会员管理对话框 -->
    <el-dialog :title="title" :visible.sync="open2" width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-form-item label="喜欢标签">
          <el-select v-model="form.likes" multiple placeholder="请选择喜欢标签">
            <el-option
              v-for="dict in likesOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="忌讳标签">
          <el-select v-model="form.taboo" multiple placeholder="请选择忌讳标签">
            <el-option
              v-for="dict in tabooOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员描述">
          <el-select v-model="form.custom"  multiple placeholder="请选择会员描述">
            <el-option
              v-for="dict in customOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="不同桌">
          <el-select v-model="form.different" filterable multiple placeholder="请选择不同桌">
            <el-option
              v-for="dict in zlList"
              :key="dict.id"
              :label="dict.name"
              :value="dict.name"
            ></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="普通麻将积分">-->
<!--          <el-select v-model="form.ordinaryMahjong" multiple  placeholder="请选择普通麻将积分">-->
<!--            <el-option-->
<!--              v-for="dict in ordinaryMahjongOptions"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="美国麻将积分">-->
<!--          <el-select v-model="form.americanMahjong"  multiple placeholder="请选择美国麻将积分">-->
<!--            <el-option-->
<!--              v-for="dict in americanMahjongOptions"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="比赛麻将积分">-->
<!--          <el-select v-model="form.matchMahjong" multiple placeholder="请选择比赛麻将积分">-->
<!--            <el-option-->
<!--              v-for="dict in matchMahjongOptions"-->
<!--              :key="dict.dictValue"-->
<!--              :label="dict.dictLabel"-->
<!--              :value="dict.dictValue"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="自定义积分">
          <el-select v-model="form.customMahjong" multiple placeholder="请选择自定义积分">
            <el-option
              v-for="dict in customMahjongOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="打牌时间">
          <el-select v-model="form.playingTime" multiple placeholder="请选择打牌时间">
            <el-option
              v-for="dict in playingTimeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listMember,
  getMember,
  saleCount,
  delMember,
  addMember,
  updateMember,
  exportMember,
  gosendMoeny,
  getzi2
} from "@/api/mahjong/member";
import defaultSettings from '@/settings'
import {handerImg, handlerdata} from "@/api/mahjong/utils";
import add from './add'
import dialogContent from './dialogjf'
import dialogRefund from './dialogRefund'
import rechargeDialog from './rechargeDialog'
import record from './record'
import {checkAmountpassword} from "@/api/system/dept";
import {  addOtherprice } from "@/api/mahjong/otherprice";
export default {
  name: "Member",
  components: { add, dialogContent, dialogRefund ,rechargeDialog,record},
  data() {
    return {
      checkPassword:'',
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      imgpre: defaultSettings.ossPreview,
      // 遮罩层
      loading: true,
      sendye:false,
      otheropen:false,
      otherfrom:{
        number:1,
        name:'',
        price:'',
        remark:''
      },
      sendmoney:'',
      sendremark:'',
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 会员管理表格数据
      memberList: [],
      // 弹出层标题
      title: "",
      memberId:'',
      // 是否显示弹出层
      open: false,
      open2: false,
      count:'',
      isRecord:false,
      pointsRedemption: false,
      visibleDialog: false,
      refundVisible: false,
      refundDialog: false,
      recharge:false,
      index:0,
      details: {},
      // 状态 0正常用户，1非正常用户字典
      statusOptions: [],
      // 喜欢标签字典
      likesOptions: [],
      // 忌讳标签字典
      tabooOptions: [],
      // 自定义标签字典
      customOptions: [],
      // 美国麻将积分模式字典
      americanMahjongOptions: [],
      // 普通麻将积分模式字典
      ordinaryMahjongOptions: [],
      // 比赛麻将积分模式字典
      matchMahjongOptions: [],
      // 自定义积分模式字典
      customMahjongOptions: [],
      // 打牌时间字典
      playingTimeOptions: [],
      zlList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn:'card_number',
        isAsc:'desc',
        playingTime: undefined,
        customMahjong: undefined,
        matchMahjong: undefined,
        ordinaryMahjong: undefined,
        americanMahjong: undefined,
        status: undefined,
        drivingDistance: undefined,
        birthday: undefined,
        cardNumber: undefined,
        phone: undefined,
        memberId: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList();
    this.init();
    this.getDicts("member_status").then(response => {
      this.statusOptions = response.data;
    });
    this.getDicts("like").then(response => {
      this.likesOptions = response.data;
    });
    this.getDicts("nolike").then(response => {
      this.tabooOptions = response.data;
    });
    this.getDicts("custom").then(response => {
      this.customOptions = response.data;
    });
    this.getDicts("america").then(response => {
      this.americanMahjongOptions = response.data;
    });
    this.getDicts("common").then(response => {
      this.ordinaryMahjongOptions = response.data;
    });
    this.getDicts("competition").then(response => {
      this.matchMahjongOptions = response.data;
    });
    this.getDicts("custom_integral").then(response => {
      this.customMahjongOptions = response.data;
    });
    this.getDicts("playing_time").then(response => {
      this.playingTimeOptions = response.data;
    });
    this.getzi();
  },
  methods: {

    updateMember(row){
      this.reset();
      const id = row.id
      this.memberId=id;
      getMember(id).then(response => {
        this.form = response.data;
        this.open=true;
        console.log( this.form)
        this.form.likes=this.coverList(this.form.likes);
        this.form.americanMahjong=this.coverList(this.form.americanMahjong);
        this.form.custom=this.coverList(this.form.custom);
        this.form.customMahjong=this.coverList(this.form.customMahjong);
        this.form.different=this.coverList(this.form.different);
        this.form.matchMahjong=this.coverList(this.form.matchMahjong);
        this.form.ordinaryMahjong=this.coverList(this.form.ordinaryMahjong);
        this.form.playingTime=this.coverList(this.form.playingTime);
        this.form.taboo=this.coverList(this.form.taboo);
        console.log(this.form.playbackTime);
        this.open2 = true;
        this.title = "会员特点维护";
      });
    },
    submitotherfrom(){
      this.otherfrom.memberId=this.memberId[0];
      addOtherprice(this.otherfrom).then(response => {
        if (response.code === 200) {
          this.msgSuccess("新增成功");
          this.otheropen = false;
          this.otherfrom={
            number:1,
            name:'',
            price:'',
            remark:''
          };
          this.getList();
        } else {
          this.msgError(response.msg);
        }
      });
    },
    gother(e){
      this.otheropen=true;
      this.otherfrom.type=e;
    },
    initData(){

this.$router.go(0);
    },
    sumbitSendMoney(){
      console.log(this.memberId[0]);
      console.log(this.sendmoney)
      gosendMoeny(this.memberId[0],this.sendmoney,this.sendremark).then(response =>{
        this.getList();
        this.sendmoney=undefined;
        this.sendremark=undefined;
        this.sendye=false;
      });
    },

  goRecharge(){
    getMember( this.memberId).then(response => {
      this.details = response.data;
      this.recharge=true
    }).then(() =>{
      this.getList();
      this.init();
    });
  },
/*检查退款的密码*/
    checkPass(){
      checkAmountpassword(this.checkPassword).then(response => {
        if(response.code==200){
          getMember( this.memberId).then(response => {
            this.details = response.data;
            this.refundDialog = true;
            this.refundVisible = false
            this.savePassWord=false;
          });

        }

      });

    },
    gojf(){

      getMember( this.memberId).then(response => {
        this.details = response.data;
        this.visibleDialog = true
      });

    },


    init(){
      saleCount().then(response => {
        this.count = response.data;
      });
    },
    sort(e){
      this.index=e
      this.isRecord=true
    },
    getzi() {
      getzi2().then(response => {
        this.zlList = response.data;

      });
    },
    showImg(e) {
      const array = [];
      array.push(this.imgpre + e.img2)
      array.push(this.imgpre + e.img1)
      return array;
    },
    handleAvatarSuccess(res) {
      this.form.img2 = res.fileName
    },
    handleAvatarSuccess2(res) {
      this.form.img1 = res.fileName
    },

    beforeAvatarUpload(file) {


      const isJPG = handerImg(file.type);

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    /** 查询会员管理列表 */
    getList() {
      this.loading = true;
      this.checkPassword=undefined;
      this.queryParams.name=this.queryParams.phone;
      this.queryParams.cardNumber=this.queryParams.phone;
      listMember(this.queryParams).then(response => {
        this.memberList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 状态 0正常用户，1非正常用户字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    tabooFormat(row, column) {
      return handlerdata(row.taboo,this.tabooOptions);
    },
    customFormat(row, column) {
      return handlerdata(row.custom,this.customOptions);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.open2 = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        updateTime: undefined,
        updateBy: undefined,
        createTime: undefined,
        createBy: undefined,
        playingTime: [],
        customMahjong: [],
        matchMahjong: [],
        ordinaryMahjong: [],
        americanMahjong: [],
        different: [],
        custom: [],
        taboo: [],
        likes: [],
        status: "0",
        remark: undefined,
        drivingDistance: undefined,
        birthday: undefined,
        cardNumber: undefined,
        img2: undefined,
        img1: undefined,
        name: undefined,
        phone: undefined,
        memberId: undefined,
        id: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.init()
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.memberId=this.ids;
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    playingTimeFormat(row, column) {


      return handlerdata(row.playingTime, this.playingTimeOptions);
    },

    tmpHandler (array,datalist) {
      console.log(array,'arrayList');
      let result=[];

      if(!array||!datalist){
        return '';
      }
      if(array.length==0){
        return '';
      }
      if(datalist.length==0){
        return '';
      }
      for(var i=0;i<array.length;i++){
        var key=array[i];
        console.log(key,'1111111111');
        for(var j=0;j<datalist.length;j++){
          var data=datalist[j];

          if(key===data.dictValue){
            console.log(key,'22222');
            console.log(data.dictValue,'22222');
            result.push(data.dictLabel);
          }
        }
      }
      return  result.join(",");
    },
    majiangCoustromFormat(row, column) {
      return handlerdata(row.ordinaryMahjong, this.ordinaryMahjongOptions);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加会员管理";
    },
    handleUpdateOther(row) {
      this.reset();
      const id = row.id
      this.memberId=id;
      getMember(id).then(response => {
        this.form = response.data;
        console.log( this.form)
        this.form.likes=this.coverList(this.form.likes);
        this.form.americanMahjong=this.coverList(this.form.americanMahjong);
        this.form.custom=this.coverList(this.form.custom);
        this.form.customMahjong=this.coverList(this.form.customMahjong);
        this.form.different=this.coverList(this.form.different);
        this.form.matchMahjong=this.coverList(this.form.matchMahjong);
        this.form.ordinaryMahjong=this.coverList(this.form.ordinaryMahjong);
        this.form.playingTime=this.coverList(this.form.playingTime);
        this.form.taboo=this.coverList(this.form.taboo);
        this.open2 = true;
        this.title = "会员特点维护";
      });
    },
    coverList(e) {
      if (e) {
        return e.split(",");
      }
      return e
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.title = "修改会员";
      this.reset();
      this.open=true
      const id = row.id || this.ids
      getMember(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改会员管理";
      });
    },
    likesFormat(row, column) {
      return handlerdata(row.likes,this.likesOptions);
    },
    // playingTimeFormat(row, column) {
    //   console.log(row.playingTime)
    //   console.log(this.playingTimeOptions)
    //   var array=[];
    //   var dataLsit=row.playingTime.split(",");
    //   for(var i=0;i<dataLsit;i++){
    //     console.log(dataLsit[i]);
    //     for(var j=0;j<this.playingTimeOptions.length;j++){
    //       console.log( this.playingTimeOptions[j])
    //       if(dataLsit[i]==this.playingTimeOptions[j].dictValue){
    //         array.push(this.playingTimeOptions[j].dictLabel)
    //       }
    //     }
    //   }
    //   return  array.join(",");
    // },
    submitOnlyForm: function () {
      if (this.form.likes) {
        this.form.likes = this.form.likes.toString()
      }
      if (this.form.americanMahjong) {
        this.form.americanMahjong = this.form.americanMahjong.toString()
      }
      if (this.form.custom) {
        this.form.custom = this.form.custom.toString()
      }
      if (this.form.customMahjong) {
        this.form.customMahjong = this.form.customMahjong.toString()

      }
      if (this.form.different) {
        this.form.different = this.form.different.toString()
      }
      if (this.form.matchMahjong) {
        this.form.matchMahjong = this.form.matchMahjong.toString()
      }
      if (this.form.ordinaryMahjong) {
        this.form.ordinaryMahjong = this.form.ordinaryMahjong.toString()
      }
      if (this.form.playingTime) {
        this.form.playingTime = this.form.playingTime.toString()
      }

      if (this.form.taboo) {
        this.form.taboo = this.form.taboo.toString()
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateMember(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.open2 = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addMember(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.open2 = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      if (this.form.likes) {
        this.form.likes = this.form.likes.join(",");
      }
      if (this.form.americanMahjong) {
        this.form.americanMahjong = this.form.americanMahjong.join(",");
      }
      if (this.form.custom) {
        this.form.custom = this.form.custom.join(",");
      }
      if (this.form.customMahjong) {
        this.form.customMahjong = this.form.customMahjong.join(",");

      }
      if (this.form.different) {
        this.form.different = this.form.different.join(",");
      }
      if (this.form.matchMahjong) {
        this.form.matchMahjong = this.form.matchMahjong.join(",");
      }
      if (this.form.ordinaryMahjong) {
        this.form.ordinaryMahjong = this.form.ordinaryMahjong.join(",");
      }
      if (this.form.playingTime) {
        this.form.playingTime = this.form.playingTime.join(",");
      }

      if (this.form.taboo) {
        this.form.taboo = this.form.taboo.join(",");
      }

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateMember(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.open2 = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            addMember(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.open2 = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除会员管理编号为"' + ids + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delMember(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function () {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有会员管理数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportMember(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function () {
      });
    }
  }
};
</script>
<style>
.pagination-container .el-pagination {
  position: static;
  text-align: center;
}
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.txtright {
  text-align: right;
}

.tableWrap {
  background-color: #fff;
  padding-bottom: 30px;

  .txtcenter {
    text-align: center;
  }

  .modify {
    background-color: #CAAB62;
    color: #fff;
  }

  .delete {
    border-color: #EB2B2B;
    color: #EB2B2B;
  }
}

.item {
  font-size: 14px;
  color: #9C9186;
  padding: 20px;
  margin-bottom: 20px;

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;

    span {
      font-size: 28px;
      color: #F90505;
      margin: 0 20px;
    }
  }

  &:last-child {
    margin-right: 0;
  }

  background-color: #fff;
  border-radius: 4px;
  height: 150px;
  margin-right: 20px;

  .title {


    font-size: 18px;
    color: #201D1B;
    position: relative;

    &::before {
      display: block;
      background-color: #CAAB62;
      width: 4px;
      height: 22px;
      content: '';
      position: absolute;
      left: -10px;
      top: 0px;
    }



  }

  .zhekou{
    margin-top: 0;
    div{
      width: 100%;
      display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    height: 46px;
    padding: 0 20px;
    }



    &:first-child {
      margin-right: 20px;
    }

    .left {
      display: flex;
      align-items: center;

      img {
        margin-right: 5px;
      }
    }

    .arrow {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      text-align: center;
      color: #fff;
      line-height: 22px;
    }

    &:first-child {
      background-color: #FFFFE6;
      border-radius: 4px;

      .arrow {
        background-color: #ECCE5C;
      }
    }

    &:last-child {
      background-color: #FFEDE6;

      .arrow {
        background-color: #E15709;
      }
    }
  }
}

.bgfff {
  background-color: #fff;
  align-items: center;
  padding: 10px 20px;

  .btn {
    text-align: right;

    span {
      display: inline-block;
      width: 100px;
      border: 1px solid #1085FF;
      color: #1085FF;
      font-size: 14px;
      border-radius: 2px;
      text-align: center;
      line-height: 40px;
      height: 40px;
      margin-left: 10px;
      cursor: pointer;

      &:hover,
      &:active,
      &:visited {
        background-color: #1085FF;
        color: #fff;
      }
    }
  }
}
</style>
